<template>
  <scroll class="suggest" :data=result :pullup="pullup" @scrollToEnd = "searchMore" ref="suggest" >
    <ul class="suggest-list">
      <li class="suggest-item" v-for="item in result" :key="item.subcode">
        <div class="icon">
          <i :class="getIconCls(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore"></loading>
    </ul>
  </scroll>
</template>

<script type="text/ecmascript-6">
import { getHotIndex } from '../../api/search'
import { filterSinger } from '../../common/js/song'
import Scroll from '../../base/scroll/scroll.vue'
import Loading from '../../base/loading/loading.vue'

const TYPE_SINGER = 'singer'
const perpage = 20

  export default {
    data () {
      return {
        page: 1,
        result: [],
        pullup: true,
        hasMore: true
      }
    },
    props: {
      query: {
        type: String,
        default: ''
      },
      showSinger: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      search () {
        this.page = 1
        this.hasMore = true
        this.$refs.suggest.scrollTo(0, 0)
        getHotIndex(this.query, perpage, this.page, (res) => {
            this.result = this._genResult(res.data)
            this._checkMore(res.data)
        })
      },
      searchMore () {
        if (!this.hasMore) {
          return false
        }
        this.page++
        getHotIndex(this.query, perpage, this.page, (res) => {
            this.result = this.result.concat(this._genResult(res.data))
            this._checkMore(res.data)
        })
      },
      _genResult (sdata) {
        let ret = []
        if ((sdata.data.zhida) && sdata.data.zhida.singerid) {
          ret.push({...sdata.data.zhida, ...{type: TYPE_SINGER}})
        }
        if (sdata.data.song) {
          ret = ret.concat(sdata.data.song.list)
        }
        return ret
      },
      getIconCls (cls) {
        if (cls.type === TYPE_SINGER) {
          return 'icon-mine'
        } else {
          return 'icon-music'
        }
      },
      getDisplayName (item) {
        if (item.type === TYPE_SINGER) {
          return item.singername
        } else {
          return `${item.songname}-${filterSinger(item.singer)}`
        }
      },
      _checkMore (data) {
        const song = data.song
        if (!song.list.length || (song.curnum + song.curpage * perpage) >= song.totalnum) {
          this.hasMore = false
        }
      }
    },
    watch: {
      query () {
        this.search()
      }
    },
    components: {
      Scroll,
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/variable.styl";
  @import "../../common/stylus/mixin.styl";

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      padding: 0 30px
      .suggest-item
        display: flex
        align-items: center
        padding-bottom: 20px
      .icon
        flex: 0 0 30px
        width: 30px
        [class^="icon-"]
          font-size: 14px
          color: $color-text-d
      .name
        flex: 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden
        .text
          no-wrap()
    .no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>